<template>
  <div class="security">
    <div class="header">
      <top-bar :barObj="barObj"/>
    </div>
    <div class="content">
      <div class="arrow-up"></div>
      <p>设置支付密码后转账，基金，红包，礼物往来等都需要 支付密码的验证</p>
      <div class="inputBox">
        <div class="key">
          <label for="password">支付密码</label>
        </div>
        <div class="val val_one" ref="payPws" data-type="1">
          <input id="password" type="password" maxlength="6" v-model="payPws_val" ref="payPwsVal">
        </div>
      </div>
      <div class="inputBox">
        <div class="key">
          <label for="Spassword">确认密码</label>
        </div>
        <div class="val val_one" ref="surePws" data-type="2">
          <input id="Spassword" type="password" maxlength="6" v-model="surePws_val" ref="payPwsVal">
        </div>
      </div>
      <span class="tip">输入6个数字密码</span>
      <div class="inputP">
        <div class="key">手机号</div>
        <div class="val">
          <span>{{phone}}</span>
          <!-- <input type="text" v-model="phone" disabled placeholder="请输入手机号"> -->
        </div>
      </div>
      <div class="inputP">
        <div class="key">
          <label for="yzCodeID">验证码</label>
        </div>
        <div class="val">
          <input id="yzCodeID" type="text" v-model="yzCode" placeholder="请输入验证码">
        </div>
        <div class="btn btn1" v-if="isShowYzBtn" @click="getyzCode()">获取验证码</div>
        <div class="btn btn2" v-else>{{count}}s后可重试</div>
      </div>
      <div class="sureBtn" @click="setPay()">确定</div>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
import { userBankPassInfo } from "../../api";
import { getGuid, openUrl, uncompileStr } from "../../utils/index";
import { hex_md5 } from "../../utils/md5";
import { Toast } from "mint-ui";
export default {
  name: "security",
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "取消",
        title: "设置支付密码",
        isIcon: true
      },
      phone: "",
      yzCode: "",
      isShowYzBtn: true,
      count: 60,
      YJEYhOld: "",
      pwsVal: "",
      surePws: "",
      pwsVal1: "",
      pwsVal2: "",
      pwsVal3: "",
      pwsVal4: "",
      pwsVal5: "",
      pwsVal6: "",
      surePws1: "",
      surePws2: "",
      surePws3: "",
      surePws4: "",
      surePws5: "",
      surePws6: "",
      timer: null,
      payPws_val: "",
      surePws_val: ""
    };
  },
  components: {
    topBar
  },
  mounted() {
    // this.inputWritePay();
    // this.inputWriteSure();
    this.phone = localStorage.zyphone;
  },
  methods: {
    //获取验证码
    getyzCode() {
      // this.getVal();
      if (!this.payPws_val) {
        Toast({
          message: "请填写密码",
          duration: 2000
        });
        return;
      }
      if (!this.phone) {
        Toast({
          message: "请填写手机号",
          duration: 2000
        });
        return;
      }

      this.isShowYzBtn = false;
      let timer = setInterval(() => {
        if (this.count >= 1) {
          this.count--;
        } else {
          clearInterval(timer);
          this.isShowYzBtn = true;
        }
      }, 1000);
      this.CheckUserBankPassInfo("1");
    },

    //确认设置
    setPay() {
      this.getVal();
      if (this.payPws_val != this.surePws_val) {
        Toast({
          message: "两次密码不一致！",
          duration: 2000
        });
        return;
      }
      if (!this.yzCode) {
        Toast({
          message: "请输入正确的验证码",
          duration: 2000
        });
        return;
      }
      this.CheckUserBankPassInfo("2");
    },
    //设置支付密码接口 MC 1发送短信；2：确认设置支付密码
    CheckUserBankPassInfo(MC) {
      userBankPassInfo({
        MC: MC,
        LoginMachine: getGuid(),
        ID: localStorage.zyUserId,
        YJEYhOld: this.YJEYhOld,
        YJEYhNew: this.yzCode,
        JYEPass: hex_md5(this.payPws_val)
      }).then(res => {
        if (res.data.Success) {
          if (MC == 1) {
            this.YJEYhOld = res.data.Content;
          } else {
            Toast({
              message: res.data.Content,
              duration: 2000
            });
            this.$router.push("/my");
          }
        } else {
          Toast({
            message: res.data.Content,
            duration: 2000
          });
        }
      });
    },
    getVal() {
      this.pwsVal =
        this.pwsVal1 +
        this.pwsVal2 +
        this.pwsVal3 +
        this.pwsVal4 +
        this.pwsVal5 +
        this.pwsVal6;
      this.surePws =
        this.surePws1 +
        this.surePws2 +
        this.surePws3 +
        this.surePws4 +
        this.surePws5 +
        this.surePws6;
    },
    inputWritePay() {
      var txts = this.$refs.payPws.getElementsByTagName("input");
      this.inputWrite(txts, 1);
    },
    inputWriteSure() {
      var txts = this.$refs.surePws.getElementsByTagName("input");
      this.inputWrite(txts, 2);
    },
    inputWrite(txts, type) {
      console.log(type);
      var _this = this;
      for (var i = 0; i < txts.length; i++) {
        var t = txts[i];
        t.index = i;
        t.setAttribute("readonly", true);
        t.oninput = function() {
          //this.value = this.value.replace(/^(.).*$/, "$1");
          var next = this.index + 1;
          if (next > txts.length - 1) {
            console.log("提交");
            // document.getElementById("tl-pupout-text").style.display = "block";
          }
          if (txts[next] == undefined) {
            return;
          }

          if (this.value != "undefined" && /^\d{1}$/.test(this.value)) {
            txts[next].removeAttribute("readonly");
            txts[next].focus();
          } else {
            Toast({
              message: "请输入数字密码",
              duration: 1000
            });
            if (type == 1) {
              if (next == 1) {
                _this.pwsVal1 = "";
              } else if (next == 2) {
                _this.pwsVal2 = "";
              } else if (next == 3) {
                _this.pwsVal3 = "";
              } else if (next == 4) {
                _this.pwsVal4 = "";
              } else if (next == 5) {
                _this.pwsVal5 = "";
              } else {
                _this.pwsVal6 = "";
              }
            } else {
              if (next == 1) {
                _this.surePws1 = "";
              } else if (next == 2) {
                _this.surePws2 = "";
              } else if (next == 3) {
                _this.surePws3 = "";
              } else if (next == 4) {
                _this.surePws4 = "";
              } else if (next == 5) {
                _this.surePws5 = "";
              } else {
                _this.surePws6 = "";
              }
            }
          }
        };
      }
      txts[0].removeAttribute("readonly");
    }
  }
};
</script>
<style lang="stylus" scoped>
.security {
  .header {
    height: 1.98rem;
    padding-top: 0.54rem;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
  }

  .content {
    position: relative;
    width: 7.1rem;
    margin: -0.5rem auto 0.5rem auto;
    border-radius: 0.2rem;
    padding: 0.25rem;
    box-sizing: border-box;
    background: #fff;

    p {
      color: rgba(152, 151, 151, 1);
      font-size: 13px;
      line-height: 20px;
      margin-bottom: 20px;
    }

    .inputBox {
      display: flex;
      line-height: 0.68rem;
      margin: 0.4rem 0 0.1rem 0;

      .key {
        width: 2rem;
        flex: 0 1 2rem;
      }

      .val {
        flex: 1;
        position: relative;

        input {
          height: 0.68rem;
          border: 1px solid #989797;
          display: inline-block;
          width: 0.68rem;
          float: left;
          text-align: center;
        }
      }

      .val_one {
        input {
          width: 100%;
          text-align: left;
          letter-spacing: 0.55rem;
          padding-left: 0.41rem;
        }
      }
    }

    .inputP {
      height: 1rem;
      line-height: 1rem;
      border-bottom: 1px solid rgba(152, 151, 151, 0.5);
      display: flex;
      margin: 0.5rem 0;
      color: rgba(152, 151, 151, 1);
      position: relative;

      .key {
        width: 2rem;
        flex: 0 1 2rem;
      }

      .val {
        flex: 1;

        input {
          color: rgba(152, 151, 151, 1);
        }
      }

      .btn {
        width: 1.6rem;
        height: 0.58rem;
        line-height: 0.58rem;
        border-radius: 0.1rem;
        font-size: 13px;
        position: absolute;
        bottom: 0.2rem;
        right: 0;
        text-align: center;
      }

      .btn1 {
        background: rgba(248, 88, 8, 1);
        color: #fff;
      }

      .btn2 {
        background: rgba(168, 167, 167, 1);
        color: #fff;
      }
    }

    .tip {
      color: #989797;
      font-size: 13px;
      margin-left: 2rem;
      margin-top: 0.1rem;
      margin-bottom: 1rem;
    }

    .arrow-up {
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 6px solid #fff;
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .sureBtn {
    width: 5.7rem;
    height: 1rem;
    line-height: 1rem;
    background: rgba(248, 88, 8, 1);
    border-radius: 0.1rem;
    color: #FFF;
    text-align: center;
    margin: 1rem auto;
    font-size: 20px;
  }
}
</style>


